<script setup lang="ts">

import {IFoodListService} from "../types/IFoodListService.ts";
import {inject} from "vue";

import cartIcon from "../assets/icons/cart/cart.png"

const foodListService=inject<IFoodListService>("foodListService")!
</script>


<template>
  <!--        购物车部分-->
  <div class="cart">
    <div class="cart-left">
      <div class="cart-left-icon">
        <!--        <i class="fa fa-shopping-cart"></i>-->
        <img :src="cartIcon" alt="cart">
        <div v-if="foodListService.getQuantity()" class="cart-left-icon-quantity">{{foodListService.getQuantity()}}</div>
      </div>
      <div class="cart-left-info" v-if="foodListService.getPrice()">
        <p>&#165;{{foodListService.getPrice()}}</p>
        <p>另需配送费3元</p>
      </div>
    </div>
    <div class="cart-right">
      <!--                两种情况 同一时间只能显示一个-->
      <!--                不够起送费-->
      <div v-if="foodListService.getPrice()<15" class="cart-right-item-deny ">&#165;15起送</div>
      <!--                够起送费-->
      <div v-else class="cart-right-item-accept">去结算</div>
    </div>
  </div>
</template>



<style scoped>
/*购物车部分*/
.cart{
  width: 100%;
  height: 14vw;
  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
}
.cart .cart-left{
  flex: 2;
  background-color: #505051;
  display: flex;
}
.cart .cart-left .cart-left-icon{
  width: 16vw;
  height: 16vw;
  box-sizing: border-box;
  border: solid 1.6vw #444;
  border-radius: 8vw;
  background-color: #3190E8;
  font-size: 7vw;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -4vw;
  margin-left: 3vw;

  position: relative;
}
.cart .cart-left .cart-left-icon img{
  width: 30px;
  height: 30px;
}
.cart .cart-left .cart-left-icon .cart-left-icon-quantity{
  width: 5vw;
  height: 5vw;
  border-radius: 2.5vw;
  background-color: red;
  color: white;
  font-size: 3.6vw;
  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}

.cart .cart-left .cart-left-info p:first-child{
  font-size: 4.5vw;
  color: white;
  margin-top: 1vw;
  -webkit-margin-after: 0;
}
.cart .cart-left .cart-left-info p:last-child{
  font-size: 2.8vw;
  color: #AAA;
  -webkit-margin-before: 0;
  /*margin-top: 0;*/
}

.cart .cart-right {
  flex:1;

  display: flex;
}
/*达到起送费*/
.cart .cart-right .cart-right-item-accept{
  background-color: #38CA73;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;

}
/*未达到配送费*/
.cart .cart-right .cart-right-item-deny{
  background-color: #535356;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;

  display: flex;
  justify-content: center;
  align-items: center;

}
</style>